<template>
  <el-card id="bar">
    <div>
      
      <el-row>
        <el-menu style="width:100%" :default-active="activeIndex" class="el-menu-demo" :router="true" mode="horizontal"
                 @select="handleSelect">

          <el-menu-item index="1" route="/">首页</el-menu-item>
          <!-- <el-menu-item index="8"   style="margin-left: 2%" route="/total">统计</el-menu-item> -->
          <el-menu-item id="space" index="" @click="egg" class="hidden-xs-only"/>
          <!--<el-menu-item/>-->


          <div style="width: 60%;float: left;margin: 10px 2% 0px 0%;margin-left:0px" class="hidden-xs-only">
            <el-input placeholder="搜索新闻" style="float: left;width:60%" v-model="searchTxt" suffix-icon="el-icon-search"
                      @keyup.enter.native="searchSubmit"/>
                      <el-select clearable style="float: left;" v-model="value" placeholder="请选择">
                        <el-option
                       
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                      <el-button  type="info"  style="float: left;"
                       @click="searchSubmit()">
                  搜索
            </el-button>
          </div>


          <el-menu-item class="hidden-xs-only" v-if="this.$store.state.token==''" index=""
                        @click="loginFormVisible = true">
            <el-button type="text">登录</el-button>
          </el-menu-item>

          <el-menu-item class="hidden-xs-only" v-if="this.$store.state.token==''" index=""
                        @click="registerFormVisible = true">
            <el-button type="text">注册</el-button>
          </el-menu-item>

          <el-dialog title="登录" :visible.sync="loginFormVisible" width="31%">
            <el-form :model="form" style="width:90%;margin-left:5%">
              <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.loginName" placeholder="用户名" prefixIcon="el-icon-user-solid"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.loginPwd" placeholder="密码" :show-password="form.loginShowPwd"
                          @keyup.enter.native="userLogin" prefixIcon="el-icon-lock"/>
              </el-form-item>
              <el-button @click="userLogin">登录&nbsp;&nbsp;<i class="el-icon-check"></i></el-button>
              <!-- <router-link to="/forgetPwd">
                <el-button @click="loginFormVisible = false">忘记密码&nbsp;&nbsp;<i class="el-icon-right"></i></el-button>
              </router-link> -->
            </el-form>
          </el-dialog>

          <el-dialog title="注册" :visible.sync="registerFormVisible" width="30%">

            <el-form :model="form" style="width:90%;margin-left:5%">
              <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.registerName" placeholder="用户名" prefixIcon="el-icon-user-solid"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.registerPwd" placeholder="密码" :show-password="form.loginShowPwd"
                          prefixIcon="el-icon-lock"/>
              </el-form-item>

              <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.registerConfirmPwd" placeholder="确认密码" :show-password="form.loginShowPwd"
                          prefixIcon="el-icon-bell"/>
              </el-form-item>


              <!-- <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.registerInviteCode" placeholder="邀请码" prefixIcon="el-icon-s-promotion"/>
              </el-form-item> -->
              <!-- <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.registerMail" placeholder="邮箱" prefixIcon="el-icon-message"/>
              </el-form-item> -->
              <!-- <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.registerMailCode" placeholder="邮箱验证码" prefixIcon="el-icon-key"/>
              </el-form-item>
              <el-button @click="sendMail">
                发送验证码&nbsp;&nbsp;
                <i class="el-icon-coffee-cup" v-if="!sendMailFlag"/>
                <i class="el-icon-loading" v-if="sendMailFlag"/>
              </el-button> -->
              <el-button @click="userRegister">注册&nbsp;&nbsp;<i class="el-icon-check"></i></el-button>
            </el-form>
          </el-dialog>

          
         
       



          <el-submenu style="position: absolute;right:0;top:10px" class="hidden-xs-only" index="4" v-if="this.$store.state.token!==''" :router="true">
            
            <template slot="title">[&nbsp;&nbsp;{{this.$store.state.name}}&nbsp;&nbsp;]</template>
              
            <el-menu-item route="/newBlog" index="4-1" v-if="this.$store.state.roles.indexOf('ADMIN') <= -1">&nbsp;&nbsp;&nbsp;
              <i class="el-icon-edit"></i>
              写新闻
            </el-menu-item>
            
            



            <el-menu-item @click="logout">&nbsp;&nbsp;&nbsp;
              <i class="el-icon-switch-button"/>退出登录
            </el-menu-item>
          </el-submenu>
          
        </el-menu>
        
      </el-row>
     
    </div>
    
  </el-card>
</template>
<script>
  import user from '@/api/user'
  import tag from '@/api/tag'
  import 'element-ui/lib/theme-chalk/display.css';

  export default {
    name: 'bar',
    data() {
      return {
        options: [],
        value: '',

        action:"/img/"+this.$store.state.userId+".jpg",
        searchTxt: '',//搜索框
        activeIndex: '1',//默认选中第一项->首页
        loginFormVisible: false,//登录框
        registerFormVisible: false,//注册框
        friendFormVisible:false,
        friendAddFormVisible:false,
        friendSearch:"",
        friendRecordFormVisible:false,
        activeName: 'first',
        form: { //表单
          loginName: '',
          loginPwd: '',
          loginShowPwd: true, //登录是否显示密码
          registerName: '',//注册
          registerPwd: '',
          registerConfirmPwd: '',
          registerMail: '',
          registerMailCode: '',
          registerInviteCode: ''
        },
        formLabelWidth: '0px',
        sendMailFlag: false,

        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

        tableDataAddFriend: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],

          tableDataAcceptFriend:[],
          tableDataSendFriend:[],
        
      }
    },
    watch: {
      // 监控当前页面path，防止刷新页面显示错误
      '$route.path': {
        deep: true,
        immediate: true,
        handler(to, from) {
          if (to === '/') {
            this.activeIndex = '1'
          } else if (to === '/message') {
            this.activeIndex = '2'
          } else if (to === '/announcement') {
            this.activeIndex = '3'
          } else {
            this.activeIndex = '4'
          }
        }
      }
    },
    created() {
      tag.getTag().then(res => {
          console.log(res.data);
          this.options=[];
          for(let i = 0 ; i < res.data.length ; i++){
              var now = {
                label:res.data[i].name,
                value:res.data[i].id
              }
              this.options.push(now);
          }

      })
    },
    methods: {
      handleSelect(key, keyPath) {
//        console.log(key, keyPath);
        if (key != null && key !== '')
          this.activeIndex = key
      },
      egg() {
        this.$notify({
          title: '彩蛋',
          message: '耐心等待 十分钟后获得一枚邀请码',
          type: 'success',
          duration: 120
        });
      },
      userLogin() { //登录方法
        if (this.form.loginName.length <= 0 || this.form.loginPwd.length <= 0) {
          this.$message({
            message: '字段不完整',
            type: 'error'
          });
          return;
        }
        user.login(this.form.loginName, this.form.loginPwd).then(response => {
          this.form.loginPwd = ''
          this.$store.commit('login', response.data)//存储token
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          this.loginFormVisible = false
        })
      },
      logout() {  //退出登录
        user.logout().then(res => {
          this.$store.commit('logout')//清除token等信息
          this.$message({
            message: '退出成功',
            type: 'success'
          });
          this.$router.push({ //路由跳转
            path: '/'
          })
        })

      },
     
      userRegister() {//用户注册
        //判断是否输入字段
        if (this.form.registerName.length <= 0 || this.form.registerPwd.length <= 0 || this.form.registerConfirmPwd.length <= 0 ) {
          this.$message({
            message: '字段不符合规范',
            type: 'error'
          });
          return;
        }
        if (this.form.registerPwd !== this.form.registerConfirmPwd) {
          this.$message({
            message: '两次密码不一致',
            type: 'error'
          });
          return;
        }
        if (this.form.registerPwd.length < 6) {
          this.$message({
            message: '密码长度需大于6位',
            type: 'error'
          });
          return;
        }
        var reg = new RegExp(/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);

        // if (!reg.test(this.form.registerMail)) {//检测字符串是否符合正则表达式
        //   this.$message({
        //     message: '邮箱格式不正确',
        //     type: 'error'
        //   });
        //   return;
        // }

        user.register(this.form.registerName, this.form.registerPwd, this.form.registerMail, this.form.registerMailCode, this.form.registerInviteCode).then(res => {
          this.$message({
            message: '注册成功',
            type: 'success'
          })
          this.registerFormVisible = false
        })

      },
      searchSubmit() {
        // if (this.searchTxt.length <= 0)
        //   return;
        this.$router.push({ //路由跳转
          path: '/searchBlog/' + this.searchTxt+"**"+this.value
        })
        this.searchTxt = '';//清空搜索框
      },

      openFriend(){
        userFriend.findUserFriend().then(response=>{
          this.tableData = response.data;
        })
        this.friendFormVisible= true;
      },

      searchFriend(){
        if(this.friendSearch ==null || this.friendSearch.length <= 0){
          this.$message({
            message: '搜索词不能为空',
            type: 'success'
          })
          return
        }
        user.getUserByName(this.friendSearch, 1, 99999).then(res => {
            this.tableDataAddFriend = res.data.rows;
        })
      },

      sendFriend(row){
    
        this.$confirm('确认添加为好友吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userFriend.sendFriend(row.id).then(response=>{
            this.$message({
            message: response.message,
            type: 'success'
          })
          })
        }).catch(() => {
             
        });
      },
      openRecord(){
        userFriend.getFriendRecord().then(response=>{
          this.tableDataSendFriend = [];
          this.tableDataAcceptFriend = [];
          var data = response.data.sendList;
          var data2 = response.data.acceptList;
          // this.tableDataSendFriend = response.data.sendList;
          for(let key in data){
            this.tableDataSendFriend.push(JSON.parse(data[key]));
          }
          for(let key in data2){
            this.tableDataAcceptFriend.push(JSON.parse(data2[key]));
          }
       
          this.friendRecordFormVisible=true;
        })
       

      },
      acceptFriend(row){
        this.$confirm('确认同意吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userFriend.friendStatus(row.userId,2).then(response=>{
            this.openRecord();
            this.openFriend();
            this.$message({
              message: response.message,
              type: 'success'
            })
          })
        }).catch(() => {
             
        });
      },
      rejectFriend(row){
        this.$confirm('确认拒绝吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userFriend.friendStatus(row.userId,3).then(response=>{
            this.openRecord();
            this.$message({
              message: response.message,
              type: 'success'
            })
          })
        }).catch(() => {
             
        });
      },

      handleDelete(row){
        this.$confirm('确认删除吗，删除后也会从对面列表删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userFriend.delFriend(row.userId).then(response=>{
            this.openFriend();
            this.$message({
              message: response.message,
              type: 'success'
            })
          })
        }).catch(() => {
             
        });
      }
    }
  }
</script>
<style>
  #bar {
    margin-top: -50px;
    margin-bottom: 0px;
  }

  #space {
    margin: 0 21% 0 20%;
  }
  .item-dialog{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
}
.el-dialog{
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        
    }
.el-dialog__body{
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }

</style>
